<#import "/common/base.ftl" as base/>
<#import "/common/button.ftl" as but/>
<#import "/common/tableOpt.ftl" as tabt/>
<#import "/common/widget.ftl" as widget/>
<#assign jses=[
"/js/service/user.js","/webjars/1.0.0/js/components.js",
				"/js/app/user.js"] in base/>
<#assign csses=["/webjars/1.0.0/css/colors.css"] in base/>
<@base.page "">
<!-- -->
<div class="grid-content bg-purple-light">
	<el-col :span="24" class="content-wrapper">
		<section>
			<el-col :span="24" class="toolbar">
				<el-row>
				  <el-button type="success" plain size="small" icon="el-icon-plus" @click="add()" >添加</el-button>
				</el-row>
				<el-form :inline="true" :model="searchVm">
					<el-form-item label="">
						<el-input style="width:150px;" v-model="searchVm.name" clearable placeholder="用户名"></el-input>
					</el-form-item>
					<@but.search "search()" ":loading='tableVm.loading'"/>
				<el-form>
			</el-col>
			<!--表格-->
			<el-table ref="multipleTable" stripe :data="tableVm.data" border style="width: 100%" v-loading="tableVm.loading">
				<el-table-column prop="name" label="用户名"  min-width="100" show-overflow-tooltip></el-table-column>
				<el-table-column prop="account" label="账号"  min-width="100" show-overflow-tooltip></el-table-column>
				<el-table-column prop="pwd" label="密码"  min-width="100" show-overflow-tooltip></el-table-column>
				<el-table-column show-overflow-tooltip  label="创建时间" min-width="100" >
                	 <template scope="scope">
			          		{{scope.row.createdTime | formatDateToDay}}
	                </template>
                </el-table-column>
				<el-table-column label="操作" min-width="300">
					<template scope="scope">
						<@tabt.show "show(scope.$index,scope.row)" />
						<@tabt.edit "edit(scope.$index,scope.row)" />
						<@tabt.delete "deleteRow(scope.$index,scope.row)" />
					</template>
				</el-table-column>
			</el-table>
			<div class="block">
				<el-pagination  @current-change="handleCurrentChange" :current-page="tableVm.pageIndex" :page-size="tableVm.pageSize" layout="prev, pager, next, jumper" :total="tableVm.total"></el-pagination>
			</div>
			<!--编辑界面-->
			<el-dialog :title="editVm.oprate" :visible.sync="editVm.visible" width="900px">
				<el-form :model="editVm.data" label-width="150px" :rules="editVm.editFormRules.formRules" ref="editForm">
					<el-row>
						<el-form-item label="用户名" prop="name">
							<el-input v-model="editVm.data.name" :disabled="!editVm.isEdit" maxlength="20"></el-input>
						</el-form-item>
						<el-form-item label="账号" prop="account">
							<el-input v-model="editVm.data.account" :disabled="!editVm.isEdit" maxlength="20"></el-input>
						</el-form-item>
						<el-form-item label="密码" prop="pwd">
							<el-input v-model="editVm.data.pwd" :disabled="!editVm.isEdit" maxlength="10"></el-input>
						</el-form-item>
					</el-row>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<@but.back "editVm.visible = false" />
					<@but.save "save(editVm)" 'v-if="editVm.isEdit" :loading="editVm.loading"'/>
				</div>
			</el-dialog>
		</section>
	</el-col>
</div>

</@base.page>
